<template>
  <div class="cinemas-movie-view">
    <div class="top-movie-name">
      <van-icon name="arrow-left" class="left" @click="rtn" />
      <div class="mingr">明日战记</div>
    </div>
    <div class="top-maoyan">
      <img src="../assets/05.png" />
      <span class="buy">19.9元起购票</span>
      <span class="opena">打开App ></span>
    </div>
    <div class="detail">
      <div class="poster">
        <img
          src="https://p0.pipi.cn/mmdb/25bfd63302f0fa395b07accde068bfd3c361f.jpg?imageMogr2/thumbnail/2500x2500%3E"
          class="poster-img"
        />
      </div>
      <div class="content">
        <div class="title line-ellipsis">明日战记</div>
        <div class="public line-ellipsis">Warriors of Future</div>
        <div class="score line-ellipsis">
          <span>9.1</span><span class="snum">(30.1万人评)</span>
        </div>
        <div class="type line-ellipsis">
          <span>动作,科幻,冒险</span>
          <div class="type-img"><span class="imax icon-bg"></span></div>
        </div>
        <div class="public line-ellipsis">中国大陆,中国香港/99分钟</div>
        <div class="public line-ellipsis">2022-08-05 10:00中国大陆上映</div>
      </div>
      <van-icon name="arrow" class="right" />
    </div>
    <van-tabs
      sticky
      line-width="100"
      title-active-color="#f03d37"
      @click="onClick"
    >
      <van-tab v-for="(item, index) in date" :title="item" :key="index">
        <van-list
          v-model="loading"
          :error.sync="error"
          error-text="请求失败，点击重新加载"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <cinemas-component
            v-for="(item, i) in cinemas"
            :key="i"
            v-bind="item"
          ></cinemas-component>
        </van-list>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { Icon, Tab, Tabs, List, Toast } from "vant";
import axios from "axios";
import dayjs from "dayjs";
import CinemasComponent from "@/components/CinemasComponent.vue";
export default {
  name: "CinemasMovieView",
  components: {
    [Icon.name]: Icon,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [List.name]: List,
    CinemasComponent,
  },
  data() {
    return {
      date: [], //日期
      yearDate: [],
      showDate: "2022-08-24", //显示时间
      offset: 0, // 当前页数
      loading: false, // 加载中的状态
      error: false, // 请求是否出错了
      finished: false, // 是否全部加载完数据，如果这个为ture，代表没有更多数据了。
      cinemas: [], // 存放数据的
    };
  },
  // computed: {

  // },
  methods: {
    onLoad() {
      axios
        .get(
          `/mmaoyan/api/mtrade/mmcs/cinema/v2/select/movie/cinemas.json?limit=20&offset=${this.offset}&utm_term=7.5&client=iphone&channelId=4&showDate=${this.showDate}&movieId=249033&sort=distance&cityId=30&ci=30&lat=22.674143&lng=113.820864&districtId=-1&lineId=-1&areaId=-1&stationId=-1&brandIds=[-1]&serviceIds=[-1]&hallTypeIds=[%22all%22]&languageIds=[%22all%22]&dimIds=[%22all%22]`
        )
        .then(({ data }) => {
          if (data.success) {
            // 做追加
            this.cinemas.push(...data.data.cinemas);
            this.offset = data.data.paging.offset;
            this.finished = !data.data.paging.hasMore;
          } else {
            Toast("请求失败");
            throw new Error("请求失败");
          }
        })
        .catch((error) => {
          console.error(error);
          // 各种原因出错了
          this.offset -= 20; // 错了之后，重新加载的话需要还是加载当前这个页
          this.error = true;
        })
        .finally(() => {
          // 设置 loading = false, 代表这次数据请求完毕
          this.loading = false;
          this.offset += 20;
        });
    },
    onClick(name) {
      // 切换tab会重新发axios
      // 所有的更新
      this.showDate = this.yearDate[name];
      this.offset = 0;
      this.loading = false;
      this.error = false;
      this.finished = false;
      this.cinemas = [];
      this.onLoad();
    },
    rtn() {
      const redirect = this.$route.query.redirect || "/";
      this.$router.replace(redirect);
    },
  },
  mounted() {
    // 格式化日期
    for (let i = 0; i < 9; i++) {
      this.date.push(dayjs().add(i, "day").format("MM月DD日"));
      this.yearDate.push(dayjs().add(i, "day").format("YYYY-MM-DD"));
    }
    this.showDate = this.yearDate[0];
  },
};
</script>

<style scoped lang="scss">
.cinemas-movie-view {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  .top-movie-name {
    height: 50px;
    background-color: #e54848;
    color: #fff;
    .mingr {
      width: 200px;
      text-align: center;
      font-size: 18px;
      line-height: 50px;
      margin: 0 auto;
    }
    .left {
      float: left;
      font-size: 18px;
      width: 50px;
      height: 50px;
      text-align: center;
      line-height: 50px;
    }
  }
  .top-maoyan {
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    box-sizing: border-box;
    img {
      width: 100px;
    }
    .buy {
      font-weight: 620;
      height: 60px;
      font-size: 13px;
      color: #666;
      line-height: 60px;
      margin-left: 60px;
    }
    .opena {
      font-weight: 700;
      font-size: 14px;
      color: #b37e7e;
    }
  }
}
.detail {
  display: flex;
  padding: 19px 30px 19px 15px;
  height: 150px;
  background-color: #293d66;
  position: relative;
  .poster {
    width: 110px;
    .poster-img {
      width: 100%;
    }
  }
  .content {
    overflow-x: hidden;
    margin-left: 12px;
    line-height: 1;
    color: #fff;
    font-size: 12px;
    .line-ellipsis {
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }
    .title {
      font-size: 20px;
      margin-top: 2px;
      font-weight: 700;
      overflow: hidden;
    }
    .score {
      margin-top: 11px;
      font-size: 18px;
      font-weight: 700;
      color: #fc0;
      .snum {
        display: inline-block;
        margin-left: 5px;
        font-size: 12px;
        color: #fff;
        opacity: 0.8;
      }
    }
    .type {
      margin-top: 10px;
      opacity: 0.8;
    }
    .public {
      margin-top: 10px;
      opacity: 0.8;
    }
  }
  .right {
    position: absolute;
    right: 20px;
    top: 42%;
    color: #fff;
  }
}
</style>
<style>
.cinemas-movie-view .van-tab {
  width: 110px;
}
</style>
